<template>
  <view class="page">
    <view class="title">修改密码</view>
    <view class="desc">请输入旧密码并设置新密码</view>
    <view class="mt-72rpx">
      <view class="mt-33rpx">
        <u-input
          v-model="formData.oldPassword"
          :prefix-icon="pwd"
          prefix-icon-style="margin: 12rpx"
          type="text"
          border="bottom"
          placeholder="请输入账户密码"
        />
      </view>
      <view class="mt-33rpx">
        <u-input
          v-model="formData.password"
          :password="!pwdShow"
          :prefix-icon="pwd"
          prefix-icon-style="margin: 12rpx"
          border="bottom"
          placeholder="请输入新的账户密码"
        >
          <template #suffix>
            <view @tap="pwdShow = !pwdShow">
              <u-icon v-if="!pwdShow" name="eye-fill" size="36rpx" />
              <u-icon v-else name="eye-off" size="40rpx" />
            </view>
          </template>
        </u-input>
      </view>
      <view class="mt-33rpx">
        <u-input
          v-model="confirmPwd"
          :password="!pwdShow"
          :prefix-icon="pwd"
          prefix-icon-style="margin: 12rpx"
          border="bottom"
          placeholder="请再次输入密码"
        >
          <template #suffix>
            <view @tap="pwdShow = !pwdShow">
              <u-icon v-if="!pwdShow" name="eye-fill" size="36rpx" />
              <u-icon v-else name="eye-off" size="40rpx" />
            </view>
          </template>
        </u-input>
      </view>

      <view class="bottom-box">
        <u-button
          text="修改密码"
          color="#386ee8"
          :disabled="!submitBtnStatus"
          :throttle-time="600"
          @click="handleSubmitPwd"
        />
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

import { userStore } from '@/store/modules'
import { showModal, showToast } from '@/utils/helper/uniHelper'

import pwd from './image/pwd.png'
import { updatePwd } from './service'

@Component
export default class Forget extends Vue {
  // hook $refs
  $refs!: {
    uCode: any
  }

  pwd = pwd

  public pwdShow = false

  public formData = {
    oldPassword: '',
    password: ''
  }
  public confirmPwd = ''

  get submitBtnStatus() {
    const { oldPassword, password } = this.formData
    return oldPassword && password.length >= 6 && this.confirmPwd
  }

  async handleSubmitPwd() {
    if (this.formData.password !== this.confirmPwd) {
      return showModal({ content: '两次输入的密码不一致！' })
    }
    try {
      await updatePwd(this.formData)
      await showToast({ title: '密码修改成功，请重新登录！' }).finally(() => {
        userStore.Logout()
      })
    } catch (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="scss" scoped>
view {
  font-family: 'PingFang SC', serif, sans-serif;
}

.page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 60rpx 31rpx;
}

.title {
  font-size: 44rpx;
  color: $color-first-text;
  font-weight: bold;
  position: relative;
  z-index: 1;

  &:before {
    content: '';
    position: absolute;
    bottom: 5rpx;
    left: 0;
    height: 12rpx;
    width: 4em;
    background: $color-primary;
    z-index: -1;
  }
}

.desc {
  margin-top: $space-base;
  font-size: $font-size-xs;
  color: $color-third-text;
}

.form {
  margin-top: 72rpx;
}

.form-item {
  margin-top: 33rpx;
}

.verification-code {
  width: 200rpx;
  height: auto;
}
</style>
